<template>
    <div class="main">
        <div class="QmainTop">
          <div class="topLeft">
            <div class="ceng1"></div>
            <div class="titleLeft"></div>
            <div class="textLeft">重点青少年家庭统计</div>
            <div id="jiaTing"></div>
          </div>
          <div class="topRight">
            <div class="ceng2"></div>
            <div class="titleRight"></div>
            <div class="textRight">涉案重点青少年</div>
            <div id="sheAn"></div>
          </div>
        </div>
        <div class="mainBottomQ">
          <div class="ceng3"></div>
          <div class="titleBottom"></div>
          <div class="textBottom">乡镇各类青少年人数</div>
          <div id="xiangZhen"></div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {}
  },
  mounted () {
    this.jiaTing()
    this.sheAn()
    this.xiangZhen()
  },
  methods: {
    jiaTing () {
      let jiaTingEcharts = this.$echarts.init(document.getElementById('jiaTing'))
      jiaTingEcharts.setOption({
        title: {
          text: '',
          subtext: '',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        calculable: true,
        series: [
          {
            name: '家庭统计',
            type: 'pie',
            radius: [50, 150],
            center: ['50%', '45%'],
            roseType: 'area',
            x: '50%',
            max: 40,
            sort: 'ascending',
            data: [
              {value: 10, name: '单亲家庭'},
              {value: 5, name: '低收入家庭'},
              {value: 15, name: '家庭成员的不良行为'},
              {value: 25, name: '抚养人受教育水平较低'},
              {value: 20, name: '与父母关系不融洽'},
              {value: 35, name: '流动家庭'},
              {value: 30, name: '其他'}
            ],
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    '#f3ae31', '#e67819', '#3dbb51', '#418b9b', '#266bfc', '#4095af', '#d73332'
                  ]
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ]
      })
    },
    sheAn () {
      let sheAnEcharts = this.$echarts.init(document.getElementById('sheAn'))
      sheAnEcharts.setOption({
        title: {
          text: '',
          subtext: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          y: 10,
          data: ['男', '女'],
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          top: '15%',
          right: '5%',
          bottom: '15%',
          left: '5%'
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: ['特别重大', '重大', '较大', '一般'],
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '总人数',
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        series: [
          {
            name: '男',
            type: 'bar',
            barWidth: 30,
            data: [10, 20, 25, 40],
            color: '#138c7b'
          },
          {
            name: '女',
            type: 'bar',
            barWidth: 30,
            data: [25, 25, 25, 25],
            color: '#844418'
          }
        ]
      })
    },
    xiangZhen () {
      let xiangZhenEcharts = this.$echarts.init(document.getElementById('xiangZhen'))
      xiangZhenEcharts.setOption({
        tooltip: {
          trigger: 'axis'
          // axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          //     type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          // }
        },
        legend: {
          y: 25,
          data: ['农村留守儿童', '闲散青少年', '有不良或严重不良行为青少年', '流浪乞讨未成年人', '服刑人员未成年子女'],
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['明港镇', '邢集镇', '平昌关镇', '五里镇', '洋河镇', '肖王镇', '龙井乡', '肖店乡', '胡店乡', '彭家湾乡', '长台关乡', '查山乡', '王岗乡', '高粱店乡'],
            axisLabel: {
              interval: 0,
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        series: [
          {
            name: '农村留守儿童',
            type: 'bar',
            barWidth: '40',
            stack: '广告',
            data: [49, 65, 88, 11, 53, 52, 63, 4, 1, 45, 9, 79, 28, 23],
            color: '#a759fe'
          },
          {
            name: '闲散青少年',
            type: 'bar',
            stack: '广告',
            data: [59, 96, 60, 8, 36, 51, 58, 12, 35, 33, 43, 84, 20, 4],
            color: '#febf04'
          },
          {
            name: '有不良或严重不良行为青少年',
            type: 'bar',
            stack: '广告',
            data: [74, 10, 37, 83, 12, 97, 40, 17, 94, 82, 63, 56, 15, 96],
            color: '#02d1e2'
          },
          {
            name: '流浪乞讨未成年人',
            type: 'bar',
            stack: '广告',
            data: [22, 80, 40, 29, 16, 99, 23, 88, 25, 6, 9, 73, 12, 3],
            color: '#fa5868'
          },
          {
            name: '服刑人员未成年子女',
            type: 'bar',
            stack: '广告',
            data: [4, 11, 65, 29, 40, 9, 46, 35, 19, 92, 95, 78, 67, 93],
            color: '#00cca3'
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.QmainTop{
  display: flex;
  justify-content: space-evenly;
}
.topLeft,.topRight{
  height: 400px;
  width: 49%;
  position: relative;
}
.titleLeft{
  width: 100%;
  height: 20px;
  background-image: url('~@/assets/bigdata/img/y_qsn1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 20px;
}
  .textLeft{
    color: white;
    position: absolute;
    top: 9px;
    left: 9%;
  }
  #jiaTing{
    width: 100%;
    height: 100%;
  }
  .titleRight{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_qsn2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textRight{
    color: white;
    position: absolute;
    top: 9px;
    left: 12%;
  }
  #sheAn{
    width: 100%;
    height: 100%;
  }
  .mainBottomQ{
    width: 100%;
    height: 400px;
    position: relative;
    margin-top: 10px;
    margin-bottom: 30px;
  }
  .titleBottom{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_qsn3.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    top: 20px;
  }
.textBottom{
  color: white;
  position: absolute;
  top: 7px;
  left: 13%;
}
  #xiangZhen{
    width: 100%;
    height: 100%;
  }
  .ceng1{
    width: 100%;
    height: 100%;
    position: absolute;
    /*background:rgb(01, 33, 66);*/
    background:#101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .ceng2{
    width: 100%;
    height: 100%;
    position: absolute;
    /*background:rgb(01, 33, 66);*/
    background:#101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .ceng3{
    width: 100%;
    height: 100%;
    position: absolute;
    /*background:rgb(01, 33, 66);*/
    background:#101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
</style>
